<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
		<meta charset="utf-8">
		<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}

			div#text {
				position: absolute;
				top: 550px;
				left: 20px;
				color: #ebebeb;
				font-family: 'Lato', sans-serif;
				font-size: 14px;
				line-height: 1.3;
			}

			p {
				margin: 0;
				margin-bottom: 10px;
			}

			a {
				text-decoration: none;
				color: #357d9b;
				outline: 0;
			}
			a:hover {
				text-decoration: underline;
				color: #3696be;
			}	

			.overlay {
				position: absolute;
				top: 0;
				left: 0;
			}

			.noise {
				background: url('img/noise.png') repeat;
			}
			.original {
				z-index: 0;
			}
			.dg.ac {
				z-index: 10;
			}

			canvas {
				position: absolute;
				top: 0;
				left: 0;
			}

			.minimal {

			}
		</style>
	</head>
	<body data-minimal="true">
		<!-- 
			The source for this demo is pretty messy. 
			At some point I hope to clean it up and package as NPM modules.

			In the mean time, check out this blog post for technical details:
			https://medium.com/p/afa98ccb97da
		 -->
		<script src="js/vendor/TweenLite.min.js"></script>
		<script src="js/vendor/EasePack.min.js"></script>
		<script src="js/vendor/jquery.min.js"></script>
		<script src="js/vendor/dat.gui.min.js"></script>
		<script src="js/bundle.js"></script>

		<div id="text">
			<p>generative painting in the impressionist style, using perlin noise for motion (work in progress)</p>
			<p><a href="https://medium.com/p/afa98ccb97da">more details</a></p>
			<p>follow me on twitter: <a href="https://twitter.com/mattdesl" target="_blank">@mattdesl</a></p>
		</div>
	</body>
</html>
